<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-10-12 19:15:20
 * @LastEditTime: 2019-12-17 17:18:14
 * @LastEditors: Please set LastEditors
 -->
<template>
<div class="container">
<van-nav-bar title="图表组件" :border="false" fixed left-arrow @click-left='$router.push("/")'/>

    <van-tag color="#23BCF9" mark>echarts组件</van-tag>
    <div id="progress"></div>
    <div class="chart_wrap">
        <van-tag color="#23BCF9" mark>vue-echarts组件</van-tag>
        <v-chart :options="option_"/>
    </div>
    <div>
        <van-tag color="#23BCF9" mark>echarts组件kline</van-tag>
    </div>
    <Kline/>
</div>
</template>
<script>
import { getOption } from "@/utils/option.js";
export default {
    name:'',
    data(){
        return{
            e:10,
            option_:getOption(20)
        }
    },
    mounted(){
        this.progress();
    },
    methods: {
        progress(){
            let mychart =this.$echarts.init(document.getElementById("progress"));
            let option = getOption(this.e);
            mychart.setOption(option);
        },
        
    },
}
</script>
<style lang="less" scoped>
#progress{
    height:300px;
}  
.echarts {
  width: 100%;
  height: 100%;
}
.chart_wrap{
    height:300px;
}
</style>